import { ChangeEvent, useEffect, useState } from "react";
import { Input, Space, Button } from 'antd';
import styles from "./login.module.scss";
import initLoginBg from "./init.ts";
import 'antd/dist/reset.css'; // or 'antd/dist/antd.less'
import './login.less';

const View = () => {

    //加载完组件后，加载背景
    useEffect(() => {
        initLoginBg();
        window.onresize = function () { initLoginBg() };
    }, []);

    // 获取用户输入的信息
    const [usernameVal, setUsernameVal] = useState(""); // 定义用户输入用户名这个变量
    const [passwordVal, setPasswordVal] = useState(""); // 定义用户输入密码这个变量
    const [captchaVal, setCaptchaVal] = useState(""); // 定义用户输入验证码这个变量

    const usernameChange = (e: ChangeEvent<HTMLInputElement>) => {
        // 获取用户输入的用户名
        // console.log(e.target.value);
        // 修改usernameVal这个变量为用户输入的那个值。 以后拿到usernameVal这个变量就相当于拿到用户输入的信息。
        setUsernameVal(e.target.value);
    }
    const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
        setPasswordVal(e.target.value);
    }
    const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
        setCaptchaVal(e.target.value);
    }
    // 点击登录按钮的事件函数
    const gotoLogin = async () => {
        console.log("用户输入的用户名，密码，验证码分别是：", usernameVal, passwordVal, captchaVal);
    }

    return (
        <div className={styles.loginPage}>
            {/* 存放背景 */}
            <canvas id="canvas" style={{ display: "block" }}></canvas>
            {/* 登录盒子 */}
            <div className={styles.loginBox + " loginbox"}>
                {/* 标题部分 */}
                <div className={styles.title}>
                    <h1>根爷&nbsp;·&nbsp;前端&nbsp;·&nbsp;通用后台系统</h1>
                    <p>Strive Everyday</p>
                </div>
                {/* 表单部分 */}
                <div className="form">
                    <Space direction="vertical" size="large" style={{ display: 'flex' }}>
                        <Input placeholder="用户名" onChange={usernameChange} />
                        <Input.Password placeholder="密码" onChange={passwordChange} />
                        {/* 验证码盒子 */}
                        <div className="captchaBox">
                            <Input placeholder="验证码" onChange={captchaChange} />
                            <div className="captchaImg" >
                                <img height="38" src="" alt="验证码图像加载失败-请检查网络" />
                            </div>
                        </div>
                        <Button type="primary" className="loginBtn" block onClick={gotoLogin}>登录</Button>
                    </Space>
                </div>
            </div>
        </div>
    )
}

export default View